<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="webjars/jquery/3.6.4/jquery.min.js"></script>
    <link rel="stylesheet" href="webjars/bootstrap/5.2.3/css/bootstrap.min.css">
    <script>
        $(function (){
            var id = $("[name='id']").val();
            $.getJSON(
                "findById",
                {id:id},
                function (data){
                    //alert(data);
                    //?data传递map（包括要修改的对象，角色集合：复选框）
                    console.log(data);
                    //获取用户对象
                    let user=data.user;
                    //获取角色集合
                    let roles=data.roles;
                    //回显用户对象
                    $("[name='name']").val(user.name);
                    $("[name='age']").val(user.age);
                    $("[name='pwd']").val(user.pwd);
                    $("[name='in_time']").val(user.in_time);
                    $("[name='address']").val(user.address);
                    //追加复选框
                    for(var i in roles){
                         $("#roles").append('<input type="checkbox" name="ids" value="'+roles[i].rid+'">'+roles[i].rname)+"&nbsp;&nbsp;";
                    }
                    //回显角色
                    for(var i in user.roles) {
                        $("[name='ids'][value='" + user.roles[i].rid+ "']").prop("checked", true);
                    }
                }
            )

        })

    </script>
</head>
<body>
      <div class="container">
          <form th:action="save" method="post">
              <input  type="hidden" name="id" th:value="${id}">
              账号：<input type="text" name="name"><br>
              密码：<input type="password" name="pwd"><br>
              年龄：<input type="text" name="age"><br>
              入职：<input type="text" name="in_time"><br>
              地址：<input type="text" name="address"><br>
              角色：<span id="roles"></span><br>
              <button class="btn btn-success">修改</button>
          </form>
      </div>
</body>
</html>
